<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue';
import {
  usePageType
} from '../tools/usePageType';
const { isView, isEdit } = usePageType();

const props = defineProps({
  videoList: {
    type: [Array, Object] ,
    default: ()=>{
			return []
		},
  },
	changeVideoList: {
		type: Function,
    default: ()=>{
			return ()=> {}
		},
	},
});

</script>

<template>
  <div class="series-list-container">
		<span class="text">排序</span>
		<div class="series-list">
			<div
				:class="item.isActive ? 'item active' : 'item' "
				v-for="(item, index) in props.videoList"
				:key="index"
				@click="props.changeVideoList(item, index)"
			>
				<img :src="item.images[0]" />
			</div>
		</div>
	</div>
</template>


<style lang="less">
.series-list-container{
		width: 100%;
		height: 51px;
		background: #182A36;
		display: flex;
		align-items: center;
		padding: 0 12px;
		.text{
			color: #fff;
		}
		.series-list{
			display: flex;
			margin-left: 14px;
			align-items: center;
			.item{
				width: 48px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 4px;
				border: 1px solid #444242;
				border-radius: 1px;
				cursor: pointer;
				&.active{
					border: 1px solid #67C9D5;
				}
				img{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
